<script setup lang="ts">
import { SearchInputMark, SearchInputMarkType } from '@/common/storage-mark';
import { ref } from 'vue';
import { sendMessage } from './utils/message';
import * as wxt from 'wxt/storage';

// 是否启用
const status = ref(false)  // 默认：显示自带模式
/** 监听当前 启用状态 */
watch(()=>status.value, (newValue, oldValue)=> {
    if(newValue) {
        sendMessage('setSearchInputStatus', {type: 'extension' as SearchInputMarkType})
    } else {
        sendMessage('setSearchInputStatus', {type: 'system' as SearchInputMarkType})
    }
})

onMounted(async() => {
  // 根据 当前搜索框 类型，显示当前按钮内容
  const searchInputType = await wxt.storage.getItem(`local:${SearchInputMark}`) as SearchInputMarkType | null
  if(searchInputType) {
    if(searchInputType === 'system') {
        status.value = false
    } else {
        status.value = true
    }
  } else {
    status.value = false
  }
});
</script>

<template>
  <el-switch
    class="switch-searchinput" 
    v-model="status"
    inline-prompt
    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #409eff"
    active-text="简约模式"
    inactive-text="自带模式"
  />
</template>

<style scoped>
.switch-searchinput {
  position: fixed;
  top: 20px;
  left: 20px;
}
</style>
